Letter Spacing is an important typography property in Figma that controls the horizontal space between individual characters in a text layer. It helps designers control text density, readability, visual hierarchy, alignment, branding, and the overall appearance of typography. Letter Spacing is especially useful when designing websites, mobile applications, dashboards, landing pages, navigation systems, buttons, cards, design systems, and responsive interfaces.
In Figma, Letter Spacing is available within the Typography section when a text layer or a portion of text is selected. Designers can use positive values to create more space between characters and negative values to bring characters closer together. The correct value depends on the selected font, font size, font weight, capitalization, content length, and intended design.
For professional UI/UX learning and practical Figma training, visit JustAcademy Figma Training and Register for Figma Course Demo.
Letter Spacing refers to the horizontal space between characters in a text. It is also commonly associated with the typography term tracking. Increasing Letter Spacing makes characters appear farther apart, while decreasing Letter Spacing makes characters appear closer together.
Normal:
DESIGN
More Letter Spacing:
D E S I G N
Less Letter Spacing:
DESIGN
Letter Spacing does not change the font size. Instead, it changes the horizontal relationship between characters.
Letter Spacing may appear to be a small typography adjustment, but it can have a significant effect on the visual quality of a design. A suitable value can make text feel balanced, while an unsuitable value can make text look crowded, disconnected, or difficult to read.
Figma provides Letter Spacing as part of its text and typography controls. When a text layer is selected, the Typography section in the right sidebar provides controls for properties such as font family, font weight, font size, line height, and Letter Spacing.
Text Layer
|
v
Typography
|
+-- Font Family
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
+-- Text Alignment
+-- Other Type Settings
Letter Spacing changes the horizontal spacing applied across a text selection. Positive spacing generally increases the width of the text, while negative spacing generally decreases it.
Positive Letter Spacing
A B C D E
Normal
ABCDE
Negative Letter Spacing
ABCDE
The visual effect depends heavily on the font. The same numerical value can look different when applied to different typefaces.
Positive Letter Spacing increases the space between characters. It is frequently used for uppercase labels, navigation elements, badges, small headings, marketing text, and certain brand treatments.
Normal:
FEATURES
Positive:
F E A T U R E S
Positive spacing should remain controlled. Too much spacing can make a word difficult to recognize as a single word.
Negative Letter Spacing reduces the horizontal distance between characters. It is often considered for large display headings where the natural spacing of a typeface may appear too loose at large sizes.
Normal:
MODERN DESIGN
Tighter:
MODERN DESIGN
Negative spacing should be used carefully because excessive negative values can cause characters to appear visually crowded or collide.
A Letter Spacing value of zero means that no additional positive or negative tracking is intentionally applied through this property. The typeface still has its own built-in character widths and spacing behavior.
Zero spacing does not mean every pair of characters will have visually identical gaps because glyph shapes and font metrics are different.
| Property | Purpose | Effect |
|---|---|---|
| Font Size | Controls the size of characters | Makes text larger or smaller |
| Letter Spacing | Controls horizontal character spacing | Makes text tighter or more open |
| Line Height | Controls vertical spacing between lines | Changes multiline text height |
| Paragraph Spacing | Controls space between paragraphs | Separates content blocks |
Letter Spacing and Line Height control two different dimensions of typography. Letter Spacing works horizontally between characters, while Line Height controls vertical spacing between lines.
Letter Spacing
<--------- Horizontal --------->
D E S I G N
Line Height
|
| Vertical
v
DESIGN
SYSTEM
Letter Spacing generally applies spacing across a text selection, while kerning concerns the spacing relationship between specific pairs of characters. For example, the visual relationship between characters such as A and V can require special adjustment because of their shapes.
| Letter Spacing | Kerning |
|---|---|
| Controls overall character spacing | Controls specific character-pair relationships |
| Can affect a complete text selection | Focuses on individual pairs |
| Useful for tracking | Useful for fine typographic correction |
Letter Spacing and tracking are commonly used to describe the same general typography concept of adjusting spacing across a range of characters. Figma uses the term Letter Spacing for this text property.
In professional typography discussions, tracking generally refers to uniform spacing adjustments applied across multiple characters.
Letter Spacing values should be evaluated according to the font and design context. For example, a designer may use 0px for regular body text, a small positive value for uppercase labels, or a small negative value for a large heading.
Example 1:
Font Size: 16px
Letter Spacing: 0px
Example 2:
Font Size: 12px
Letter Spacing: 1px
Example 3:
Font Size: 48px
Letter Spacing: -1px
These are illustrative examples rather than universal typography rules.
Typography hierarchy helps users understand the importance and relationship of content. Letter Spacing can support this hierarchy by differentiating labels, headings, body text, captions, and buttons.
EYEBROW LABEL
Letter Spacing: Positive
Main Heading
Letter Spacing: Tight or Neutral
Body Text
Letter Spacing: Neutral
BUTTON LABEL
Letter Spacing: Slightly Positive
Large headings may require different Letter Spacing from body text. At larger sizes, a font's natural spacing can appear visually loose. A small negative adjustment may make the heading appear more cohesive.
However, not every heading needs negative spacing. The correct value must be evaluated against the selected typeface and the overall composition.
Body text should prioritize comfortable reading. Excessive positive Letter Spacing can make sentences feel fragmented, while excessive negative spacing can make characters appear crowded.
For many body text styles, designers start close to the font's natural spacing and make only small adjustments when necessary.
Uppercase text can appear visually dense because capital letters have strong vertical forms. A controlled increase in Letter Spacing can create more breathing room.
Without additional spacing:
PRODUCT DESIGN
With additional spacing:
P R O D U C T D E S I G N
Uppercase navigation labels, eyebrow text, badges, and section labels are common examples where increased spacing may be useful.
Lowercase text generally has varied character shapes and ascenders and descenders. Excessive positive Letter Spacing can make lowercase text look disconnected.
For long lowercase paragraphs, prioritize readability over decorative spacing.
Display typography includes large hero headings, campaign titles, promotional statements, and other high-impact text. Display typography allows more experimentation with Letter Spacing because the text is often intended to create a visual statement.
Buttons should be easy to recognize and scan. Slightly increased spacing can work well for uppercase button labels, but excessive spacing may make the button wider than necessary.
Normal:
GET STARTED
Possible spaced treatment:
G E T S T A R T E D
The final value should be determined by the button dimensions, font, capitalization, and design system.
Navigation requires fast scanning and efficient use of horizontal space. Letter Spacing should therefore be subtle and consistent across navigation items.
Labels are often small and secondary pieces of information. Positive Letter Spacing can help uppercase labels stand apart from larger content.
NEW
FEATURED
POPULAR
TRENDING
The spacing should remain subtle enough for the text to continue reading naturally.
Captions are usually small text elements associated with images, charts, or supporting information. Because captions already use a smaller font size, excessive spacing can make them harder to read.
Forms include labels, placeholders, input values, helper text, error messages, and buttons. Typography must remain consistent throughout the form.
| Form Element | Recommended Approach |
|---|---|
| Field Label | Subtle spacing |
| Input Text | Natural or neutral spacing |
| Placeholder | Prioritize readability |
| Helper Text | Comfortable spacing for small text |
| Error Message | Clear and readable |
| Button | Controlled spacing when appropriate |
Cards often contain titles, descriptions, metadata, badges, prices, and buttons. Different text roles can use different Letter Spacing values while still following one typography system.
For example, a small uppercase category label can use positive spacing, while the main card title can use neutral or slightly tighter spacing.
Dashboards contain dense information such as metrics, labels, navigation, filters, tables, and charts. Letter Spacing can help distinguish small labels from larger numerical values.
ANALYTICS
12,450
ACTIVE USERS
+18.5%
MONTHLY GROWTH
Numerical information should remain compact and easy to scan.
E-commerce designs contain product titles, prices, categories, badges, discounts, ratings, and CTAs. Letter Spacing should support fast scanning and visual hierarchy.
Mobile interfaces have limited horizontal space, so Letter Spacing must be tested carefully. Increasing spacing can cause headings and navigation labels to wrap earlier.
Desktop:
PRODUCT OVERVIEW
Mobile:
PRODUCT
OVERVIEW
Always inspect the typography at the actual mobile frame size.
Responsive typography may use different font sizes and Letter Spacing values at different breakpoints. A heading that works well on desktop may need a different treatment on mobile.
Desktop
Font Size: 48px
Letter Spacing: -1px
Tablet
Font Size: 36px
Letter Spacing: -0.5px
Mobile
Font Size: 30px
Letter Spacing: 0px
These values are examples only. Designers should test the actual typeface and content.
Letter Spacing affects the horizontal width occupied by text. Increasing the spacing generally makes the text wider, while reducing the spacing generally makes it narrower.
More spacing
TEXT -------------------->
Less spacing
TEXT ---------->
This can affect buttons, cards, navigation, headings, and responsive layouts.
When Letter Spacing changes, text may occupy a different amount of horizontal space and therefore wrap differently.
Before:
Create Better Products
After increased spacing:
Create Better
Products
This is particularly important for fixed-width headings and components.
Letter Spacing can indirectly affect Auto Layout because changing the spacing changes the dimensions of the text layer. The parent Auto Layout frame may therefore resize according to its sizing rules.
Text Layer
|
v
Letter Spacing changes
|
v
Text Width changes
|
v
Auto Layout recalculates
|
v
Component dimensions may change
Text resizing controls how the text box behaves, while Letter Spacing controls character spacing. They work together but serve different purposes.
| Feature | Purpose |
|---|---|
| Letter Spacing | Controls spacing between characters |
| Auto Width | Allows horizontal text growth |
| Auto Height | Allows vertical growth after wrapping |
| Fixed Size | Maintains a fixed text box size |
Font Weight controls character thickness, while Letter Spacing controls the distance between characters. A bold font may visually feel denser than a regular font even when both use the same spacing value.
Typography should therefore be evaluated as a combination of font family, weight, size, line height, and Letter Spacing.
Every typeface has different glyph widths, proportions, and built-in spacing. Therefore, the same Letter Spacing value can produce different visual results in different fonts.
Font A + 1px
May appear balanced.
Font B + 1px
May appear too open.
Never assume that a Letter Spacing value can be copied blindly from one font to another.
Large typography makes spacing differences more noticeable. Small typography can become difficult to read if excessive spacing is applied.
Letter Spacing should therefore be evaluated relative to font size and the purpose of the text.
Visual density refers to how tightly information appears within a design. Letter Spacing is one factor that influences perceived density.
Compact
████████████████
Balanced
████ ████ ████
Open
██ ██ ██ ██
A professional design aims for intentional visual density rather than simply maximizing or minimizing spacing.
Readability describes how comfortably users can read text. Letter Spacing should support the reading experience instead of being used purely as decoration.
Legibility concerns how easily individual characters can be identified. Excessive negative Letter Spacing can make glyphs appear merged, while excessive positive Letter Spacing can make words harder to recognize as groups.
Letter Spacing should be treated as part of a typography system rather than as an isolated adjustment on every screen.
Typography System
|
+-- Display
+-- Heading
+-- Title
+-- Body
+-- Label
+-- Caption
+-- Button
|
+-- Font Family
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
A design system can define reusable spacing values for different typography roles. The following values are illustrative and should be adapted to the chosen typeface.
| Typography Style | Example Size | Illustrative Letter Spacing |
|---|---|---|
| Display Large | 56px | -1.5px |
| Heading 1 | 40px | -1px |
| Heading 2 | 32px | -0.5px |
| Heading 3 | 24px | 0px |
| Body | 16px | 0px |
| Caption | 12px | 0.2px |
| Uppercase Label | 12px | 1px |
Figma Text Styles can store typography properties such as font family, weight, size, line height, and Letter Spacing. This allows designers to create reusable and consistent typography across a project.
Text Style
|
+-- Font Family
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
+-- Other Typography Properties
Meaningful naming makes design systems easier to understand and maintain.
Typography/Display/Large
Typography/Heading/H1
Typography/Heading/H2
Typography/Body/Regular
Typography/Body/Small
Typography/Label/Uppercase
Typography/Button/Primary
Purpose-based names are generally more useful than names based only on numerical values.
Figma number variables can be used for numerical typography properties, including Letter Spacing. This can help teams create reusable and consistent design-system values.
Typography Variables
|
+-- LetterSpacing/Tight
+-- LetterSpacing/Normal
+-- LetterSpacing/Loose
+-- LetterSpacing/Label
Semantic naming describes the purpose of a value rather than exposing only the numerical value.
| Less Meaningful | More Meaningful |
|---|---|
| Spacing/-1px | Typography/Tight |
| Spacing/0px | Typography/Normal |
| Spacing/1px | Typography/Label |
Brand typography may use custom Letter Spacing to establish a distinctive visual identity. Brand labels, campaign headings, wordmarks, and marketing statements may have specific approved spacing values.
Brand typography should follow documented brand guidelines rather than being adjusted randomly.
Wordmarks can require very precise typographic adjustments. In some cases, designers use custom kerning, vector modifications, or outlined typography instead of relying only on Letter Spacing.
When working with an official logo or wordmark, always use the approved brand asset or documented specification.
Hero sections frequently combine eyebrow labels, large headings, supporting paragraphs, and CTA buttons. Letter Spacing can help create visual separation between these typography roles.
NEW EXPERIENCE
Positive Letter Spacing
Build Better Products
Tighter or Neutral Letter Spacing
Design and launch products faster.
Neutral Letter Spacing
GET STARTED
Subtle Positive Letter Spacing
Landing pages use typography to establish hierarchy and guide users toward important actions. Letter Spacing can help differentiate section labels, headings, promotional content, buttons, and supporting information.
Pricing cards contain plan names, prices, billing periods, feature lists, and CTA buttons. Small uppercase plan labels may use positive Letter Spacing, while prices should prioritize clarity.
PRO PLAN
₹1,999 / MONTH
FEATURES
Unlimited Projects
Priority Support
GET STARTED
Tables contain dense information and require efficient use of horizontal space. Excessive Letter Spacing can make table columns unnecessarily wide.
Charts and dashboards use labels, legends, axis titles, and numeric values. Since these areas often have limited space, Letter Spacing should be controlled carefully.
Badges often contain short uppercase words such as NEW, SALE, PRO, BETA, or ACTIVE. A small positive Letter Spacing value can help create a clean badge appearance.
NEW
SALE
PRO
BETA
Status labels such as ACTIVE, PENDING, FAILED, and COMPLETED should maintain consistent typography across the interface. Letter Spacing can be included as part of the shared status-label style.
Breadcrumbs are compact navigation components. Excessive spacing can make them unnecessarily wide, especially on mobile screens.
Home / Products / Design / FigmaSpacing should improve readability without wasting valuable horizontal space.
Navigation items should be easy to scan. Use consistent Letter Spacing across menu items and verify that changes do not create unnecessary movement or wrapping.
If an active navigation item changes its font weight or Letter Spacing, its width can change. This may cause neighboring navigation items to move.
Normal:
HOME | PRODUCTS | ABOUT
Active:
HOME | PRODUCTS | ABOUT
Potential issue:
Different font weight or spacing
can change text width.
Auto Layout and consistent component structures can help manage these changes.
Mobile navigation has limited space, so large positive Letter Spacing should be avoided when it causes labels to wrap or overflow.
Letter Spacing should support accessible and comfortable reading. Designers should avoid spacing choices that make text difficult to understand or force unnecessary wrapping.
Long-form content such as articles, documentation, tutorials, and educational material should prioritize reading comfort. Decorative Letter Spacing is usually unnecessary for long paragraphs.
Quotes can use larger display typography and may allow more expressive Letter Spacing.
“Design is not just
what it looks like.
Design is how it works.”
The spacing should complement the quote's font size, weight, and line height.
Error messages need to be immediately understandable. Decorative Letter Spacing should not reduce clarity or cause unnecessary wrapping.
Password must contain at least 8 characters.Helper text is generally small and secondary. Keep the spacing comfortable so that the text remains easy to read.
Tooltips often have narrow containers. Excessive Letter Spacing can make their text wrap unnecessarily, so compact and readable typography is usually preferred.
Notifications need to be understood quickly. Letter Spacing should support scanning rather than becoming a visual distraction.
Different languages and writing systems can behave differently with typography. A spacing value designed for English should not automatically be assumed to work equally well for every language.
Multilingual products should be tested with actual translated content.
Numbers are commonly used in prices, statistics, dashboards, financial interfaces, and tables. Letter Spacing should be evaluated carefully because numerical information needs quick scanning.
Icons and text are separate visual elements. When an icon appears next to text, use layout spacing or Auto Layout gap settings to control the distance between the icon and text rather than changing Letter Spacing.
[Icon] Download
[Icon] Settings
[Icon] Share
Buttons, chips, badges, cards, and navigation items frequently use Auto Layout. Since Letter Spacing can change text width, it can indirectly change the dimensions of these components.
Button
|
+-- Icon
+-- Text
|
+-- Letter Spacing
|
v
Auto Layout
|
v
Updated Width
Reusable components should use consistent typography. If a button uses a specific Letter Spacing value, all instances should normally inherit that value unless an intentional variant or override is required.
Different component variants may use different typography treatments.
| Component Variant | Possible Letter Spacing Approach |
|---|---|
| Small Button | Compact or neutral |
| Primary Button | Neutral or subtle positive |
| Marketing CTA | More expressive |
| Uppercase Label | Positive tracking |
Letter Spacing is an important typography property during developer handoff. Developers need to understand the intended typography so that the implemented interface matches the design.
Figma's developer inspection capabilities can help developers identify text properties and translate them into implementation values.
On the web, Figma Letter Spacing generally maps to the CSS letter-spacing property.
Figma:
Letter Spacing: 1px
CSS:
.heading {
letter-spacing: 1px;
}
For tighter display typography:
.hero-title {
letter-spacing: -1px;
}
The production value should be based on the inspected design and the actual implementation requirements.
Responsive designs can use different typography values at different breakpoints.
.hero-title {
font-size: 48px;
letter-spacing: -1px;
}
@media (max-width: 768px) {
.hero-title {
font-size: 34px;
letter-spacing: -0.5px;
}
}
In a mature design system, Letter Spacing can be represented as a reusable design token. Tokens make it easier to maintain consistency across components and products.
Typography Tokens
|
+-- typography.letterSpacing.tight
+-- typography.letterSpacing.normal
+-- typography.letterSpacing.label
+-- typography.letterSpacing.loose
Typography consistency means that similar content roles use similar typography rules. If every heading uses a random Letter Spacing value, the interface can feel inconsistent.
Use Text Styles, Variables, and documented typography rules wherever possible.
Suppose you are designing a SaaS landing page. A possible typography system could be structured like this:
NEW PRODUCT
Letter Spacing: 1px
Build Better Digital Products
Letter Spacing: -1px
Create and launch products faster.
Letter Spacing: 0px
GET STARTED
Letter Spacing: 0.5px
The values are illustrative and should be tested against the chosen font.
Consider a mobile banking application.
MY ACCOUNT
BALANCE
₹85,450
AVAILABLE BALANCE
₹72,800
VIEW DETAILS
Small uppercase labels may use subtle positive Letter Spacing, while monetary values should remain compact and highly readable.
ANALYTICS DASHBOARD
TOTAL USERS
12,450
MONTHLY REVENUE
₹8,45,000
ACTIVE ORDERS
3,240
Small uppercase labels can use controlled positive spacing, while values should remain easy to scan.
NEW ARRIVAL
Wireless Headphones
₹4,999
4.8 ★
ADD TO CART
The NEW ARRIVAL label can use positive spacing, while the product name and price should prioritize readability.
Start with the font's natural spacing and make small adjustments. Evaluate the result at the actual display size and in the real component where the typography will be used.
Choose Font
|
v
Use Natural Spacing
|
v
Evaluate Typography
|
v
Make Small Adjustment
|
v
Check Readability
|
v
Check Wrapping
|
v
Check Responsive Layout
|
v
Finalize
Choose Font
|
v
Set Font Weight
|
v
Set Font Size
|
v
Set Line Height
|
v
Set Letter Spacing
|
v
Check Text Width
|
v
Check Text Wrapping
|
v
Check Auto Layout
|
v
Check Responsive Design
|
v
Create Text Style
|
v
Apply to Components
|
v
Developer Handoff
Create a complete typography system for a SaaS website and use Letter Spacing as one of the typography properties.
Create an e-commerce product page containing navigation, product title, description, price, discount badge, rating, product details, and CTA buttons.
Design a mobile dashboard containing a page title, account balance, statistics, chart labels, navigation, and action buttons.
Experiment with Letter Spacing for labels and headings while keeping numerical values compact and readable.
Letter Spacing is a typography property that controls the horizontal space between characters in a text layer or text selection.
It is available in the Typography section of the right sidebar when a text layer or text selection is active.
Characters generally become more widely spaced and the overall text width increases.
Characters generally become closer together and the overall text width decreases.
Letter Spacing controls horizontal character spacing, while Line Height controls vertical spacing between lines.
Letter Spacing generally applies spacing across a range of characters, while kerning concerns the spacing relationship between specific character pairs.
Yes. Letter Spacing can be stored as part of a reusable Text Style.
Yes. It can change text width, which can affect wrapping, component dimensions, Auto Layout, and responsive behavior.
Generally, body text should prioritize comfortable reading, so large Letter Spacing values should be used cautiously.
Uppercase labels can look visually dense, so controlled positive spacing can provide separation and hierarchy.
| Concept | Meaning |
|---|---|
| Letter Spacing | Horizontal spacing between characters |
| Positive Value | Increases character spacing |
| Negative Value | Decreases character spacing |
| Zero | No additional Letter Spacing value |
| Line Height | Vertical spacing between lines |
| Kerning | Spacing relationship between specific character pairs |
| Tracking | Common typography term for overall character spacing |
| Text Style | Reusable typography configuration |
| Auto Layout | Can react to text dimension changes |
| Design Token | Reusable design-system value |
Letter Spacing is a small but powerful typography property in Figma. It controls the horizontal relationship between characters and can significantly influence readability, visual density, hierarchy, branding, component dimensions, and responsive behavior.
A professional UI/UX designer should not randomly increase or decrease Letter Spacing. Instead, the designer should consider the font family, font weight, font size, line height, capitalization, text length, component dimensions, screen size, and design-system rules before selecting an appropriate value.
By combining Letter Spacing with Text Styles, Variables, Auto Layout, responsive design principles, typography hierarchy, and proper developer handoff practices, designers can create consistent and professional interfaces that are easier to maintain and implement.
To learn Figma through structured, practical UI/UX training, visit JustAcademy Figma Training and Register for Figma Course Demo.
